<template>
  <div class="app-page-box">
    <div class="app-page">
      <div class="top">
        <Back />
        <h2>承租人完整补充</h2>
      </div>
      <div class="content">
        <a-form :model="formData" layout="inline" :label-col="labelCol" :wrapper-col="wrapperCol">
          <div class="info-item">
            <div class="info-title">
              <img src="/@/assets/images/detail_title.png" alt="" />
              基本信息
            </div>
            <div class="info-content">
              <div class="bussinessCode">
                业务编号：<span>{{ formData.bussNo }}</span>
              </div>
              <a-row :gutter="20">
                <a-col :span="24">
                  <a-form-item label="" name="role">
                    <a-radio-group v-model:value="formData.role">
                      <a-radio value="1">客户是自然人</a-radio>
                      <a-radio value="2">客户是企业</a-radio>
                    </a-radio-group>
                  </a-form-item>
                </a-col>
                <a-col :span="5">
                  <a-form-item label="" name="fontUrl">
                    <div class="upload-item">
                      <img v-if="formData.fontUrl" :src="formData.fontUrl" alt="" />
                      <img v-else src="/@/assets/images/font.png" alt="" />
                      <Upload
                        style="opacity: 0; position: absolute; left: 0; top: 0; width: 100%; height: 100%"
                        accept=".jpg,.jpeg,.png,.gif"
                        :maxUploadSize="1"
                        :default-file-list="formData.fontUrl || []"
                        listType="picture-card"
                        @change="(files) => onUpload(files, 'fontUrl')"
                      />
                    </div>
                  </a-form-item>
                </a-col>

                <a-col :span="16">
                  <a-form-item label="" name="backUrl">
                    <div class="upload-item">
                      <img v-if="formData.backUrl" :src="formData.backUrl" alt="" />
                      <img v-else src="/@/assets/images/back.png" alt="" />
                      <Upload
                        style="opacity: 0; position: absolute; left: 0; top: 0; width: 100%; height: 100%"
                        accept=".jpg,.jpeg,.png,.gif"
                        :maxUploadSize="1"
                        :default-file-list="formData.backUrl || []"
                        listType="picture-card"
                        @change="(files) => onUpload(files, 'backUrl')"
                      />
                    </div>
                    <p>上传照片可以自动解析，快试试吧</p>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="姓名：" name="custName">
                    <a-button class="submit small" size="small" style="margin: 0" @click="onFriendOpen">关联客户</a-button>
                    <a-input v-model:value="formData.custName" placeholder="请输入" style="width: 180rem" />
                  </a-form-item>
                </a-col>
                <a-col :span="16">
                  <a-form-item label="民族：" name="custNationCode">
                    <a-select
                      label-in-value
                      v-model:value="formData.custNationCode"
                      placeholder="请选择"
                      style="width: 280rem"
                      @change="nationChange"
                    >
                      <a-select-option v-for="item in rzApplyStore.getNationData" :key="item.value" :value="item.vlaue">{{
                        item.name
                      }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="身份证号码：" name="certNo">
                    <a-input v-model:value="formData.certNo" placeholder="请输入" style="width: 280rem" />
                  </a-form-item>
                </a-col>

                <a-col :span="7">
                  <a-form-item label="证件有效期：" name="certDate">
                    <a-range-picker v-model:value="formData.certDate" type="date" :placeholder="['请选择','请选择']" style="width: 280rem" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="" name="certLongTerm">
                    <a-radio-group v-model:value="formData.certLongTerm">
                      <a-radio value="Y">长期有效</a-radio>
                    </a-radio-group>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="省市区(证件)：" name="homeRegion">
                    <a-cascader
                      v-model:value="formData.homeRegion"
                      :options="regionData"
                      style="width: 280rem"
                      @change="(e, selectedOptions) => regionChange(e, selectedOptions, 'owner')"
                      :field-names="{ label: 'areaName', value: 'areaId', children: 'children' }"
                      placeholder="请选择"
                    />
                  </a-form-item>
                </a-col>
                <!-- <a-col :span="8">
                  <a-form-item label="省份(证件)：" name="placeProvinceValue">
                    <a-select
                      label-in-value
                      v-model:value="formData.placeProvinceValue"
                      placeholder="请选择省份"
                      style="width: 280rem"
                      @change="(e, a) => regionChange(e, 'placeProvinceValue')"
                    >
                      <a-select-option v-for="item in province" :key="item.areaId" :value="item.areaId">{{ item.areaName }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>

                <a-col :span="7">
                  <a-form-item label="城市(证件)：" name="placeCityValue">
                    <a-select
                      label-in-value
                      v-model:value="formData.placeCityValue"
                      placeholder="请选择城市"
                      style="width: 280rem"
                      @change="(e) => regionChange(e, 'placeCityValue')"
                    >
                      <a-select-option v-for="item in city" :key="item.areaId" :value="item.areaId">{{ item.areaName }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>

                <a-col :span="8"
                  ><a-form-item label="区县(证件)：" name="placeAreaValue">
                    <a-select
                      label-in-value
                      v-model:value="formData.placeAreaValue"
                      placeholder="请选择区县"
                      style="width: 280rem"
                      @change="(e) => regionChange(e, 'placeAreaValue')"
                    >
                      <a-select-option v-for="item in area" :key="item.areaId" :value="item.areaId">{{ item.areaName }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col> -->

                <a-col :span="8">
                  <a-form-item label="手机号码：" name="custMobile">
                    <a-input v-model:value="formData.custMobile" placeholder="请输入手机号码" style="width: 280rem" />
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <a-form-item label="详细地址：" name="custHomeplace">
                    <a-input v-model:value="formData.custHomeplace" placeholder="请输入详细地址" />
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </div>

          <div class="info-item">
            <div class="info-title">
              <img src="/@/assets/images/detail_title.png" alt="" />
              基本信息
            </div>
            <div class="info-content">
              <a-row :gutter="20">
                <a-col :span="8">
                  <a-form-item label="婚姻状况：" name="custMarriage">
                    <a-select v-model:value="formData.custMarriage" placeholder="请选择" style="width: 280px">
                      <a-select-option v-for="item in rzApplyStore.getCustMarriage" :key="item.valueCode" :value="item.valueCode">{{
                        item.valueName
                      }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="是否有子女：" name="hasChildren">
                    <a-select v-model:value="formData.hasChildren" placeholder="请选择" style="width: 280px">
                      <a-select-option v-for="item in rzApplyStore.getHasChildren" :key="item.valueCode" :value="item.valueCode">{{
                        item.valueName
                      }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="教育程度：" name="custEducation">
                    <a-select v-model:value="formData.custEducation" placeholder="请选择" style="width: 280px">
                      <a-select-option v-for="item in rzApplyStore.getCustEducation" :key="item.valueCode" :value="item.valueCode">{{
                        item.valueName
                      }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </div>
          <div class="info-item">
            <div class="info-title">
              <img src="/@/assets/images/detail_title.png" alt="" />
              配偶信息
            </div>
            <div class="info-content">
              <a-row :gutter="20">
                <a-col :span="8">
                  <a-form-item label="姓名：" name="spouse.custName">
                    <a-input v-model:value="formData.spouse.custName" placeholder="请输入" style="width: 280px" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="民族：" name="spouse.custNationCode">
                    <a-select
                      label-in-value
                      v-model:value="formData.spouse.custNationCode"
                      placeholder="请选择"
                      style="width: 280rem"
                      @change="nationChange"
                    >
                      <a-select-option v-for="item in rzApplyStore.getNationData" :key="item.value" :value="item.vlaue">{{
                        item.name
                      }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="手机号：" name="spouse.custMobile">
                    <a-input v-model:value="formData.spouse.custMobile" placeholder="请输入" style="width: 280px" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="身份证号码：" name="spouse.certNo">
                    <a-input v-model:value="formData.spouse.certNo" placeholder="请输入" style="width: 280px" />
                  </a-form-item>
                </a-col>
                <a-col :span="7">
                  <a-form-item label="证件有效期：" name="spouse.certDate">
                    <a-range-picker v-model:value="formData.spouse.certDate" type="date" :placeholder="['请选择','请选择']" style="width: 280px" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="" name="spouse.certLongTerm" :wrapper-col="{ span: 0, offset: 0 }">
                    <a-radio-group v-model:value="formData.spouse.certLongTerm">
                      <a-radio value="Y">长期有效</a-radio>
                    </a-radio-group>
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </div>
          <div class="info-item">
            <div class="info-title">
              <img src="/@/assets/images/detail_title.png" alt="" />
              职业及收入信息
            </div>
            <div class="info-content">
              <a-row :gutter="20">
                <a-col :span="8">
                  <a-form-item label="个人年收入：" name="webDealerPIncome">
                    <a-input v-model:value="formData.webDealerPIncome" placeholder="请输入" style="width: 280px" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="家庭年收入：" name="webDealerFIncome">
                    <a-input v-model:value="formData.webDealerFIncome" placeholder="请输入" style="width: 280px" />
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </div>

          <div class="info-item">
            <div class="info-title">
              <img src="/@/assets/images/detail_title.png" alt="" />
              回款账户信息
            </div>
            <div class="info-content">
              <a-row :gutter="20">
                <a-col :span="8">
                  <a-form-item label="账户名称：" name="accountName">
                    <a-input v-model:value="formData.accountName" placeholder="请输入" style="width: 280px" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="开户银行：" name="accountBankCode">
                    <a-input v-model:value="formData.accountBankCode" placeholder="请输入" style="width: 280px" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="银行卡号：" name="account">
                    <a-input v-model:value="formData.account" placeholder="请输入" style="width: 280px" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="银行签约手机号：" name="phoneNo">
                    <a-input v-model:value="formData.phoneNo" placeholder="请输入" style="width: 280px" />
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </div>
          <div class="info-item">
            <div class="info-title">
              <img src="/@/assets/images/detail_title.png" alt="" />
              送达信息
            </div>
            <div class="info-content">
              <a-row :gutter="20">
                <a-col :span="8">
                  <a-form-item label="省市区(证件)：" name="addressRegion">
                    <a-cascader
                      v-model:value="formData.addressRegion"
                      :options="regionData"
                      style="width: 280rem"
                      @change="(e, selectedOptions) => regionChange(e, selectedOptions, 'address')"
                      :field-names="{ label: 'areaName', value: 'areaId', children: 'children' }"
                      placeholder="请选择"
                    />
                  </a-form-item>
                </a-col>

                <!-- <a-col :span="8">
                  <a-form-item label="省份(证件)：" name="homeProvinceValue">
                    <a-select
                      label-in-value
                      v-model:value="formData.homeProvinceValue"
                      placeholder="请选择省份"
                      style="width: 280rem"
                      @change="(e, a) => regionChange2(e, 'homeProvinceValue')"
                    >
                      <a-select-option v-for="item in province" :key="item.areaId" :value="item.areaId">{{ item.areaName }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>

                <a-col :span="8">
                  <a-form-item label="城市(证件)：" name="homeCityValue">
                    <a-select
                      label-in-value
                      v-model:value="formData.homeCityValue"
                      placeholder="请选择城市"
                      style="width: 280rem"
                      @change="(e) => regionChange2(e, 'homeCityValue')"
                    >
                      <a-select-option v-for="item in city" :key="item.areaId" :value="item.areaId">{{ item.areaName }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>

                <a-col :span="8">
                  <a-form-item label="区县(证件)：" name="homeAreaValue">
                    <a-select
                      label-in-value
                      v-model:value="formData.homeAreaValue"
                      placeholder="请选择区县"
                      style="width: 280rem"
                      @change="(e) => regionChange2(e, 'homeAreaValue')"
                    >
                      <a-select-option v-for="item in area" :key="item.areaId" :value="item.areaId">{{ item.areaName }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col> -->

                <a-col :span="21">
                  <a-form-item label="详细地址：" name="custAddress">
                    <a-input v-model:value="formData.custAddress" placeholder="请输入详细地址" />
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </div>

          <!-- <div class="info-item" v-if="rzApplyStore.getRole == 'guarantor'">
            <div class="info-title">
              <img src="/@/assets/images/detail_title.png" alt="" />
              担保方式
            </div>
            <div class="info-content">
              <a-row :gutter="20">
                <a-col :span="8">
                  <a-form-item label="担保方式：" name="t">
                    <a-select v-model:value="formData.p" placeholder="请选择担保方式" style="width: 280px">
                      <a-select-option value="保证担保">保证担保</a-select-option>
                      <a-select-option value="抵押担保">抵押担保</a-select-option>
                      <a-select-option value="质押担保">质押担保</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </div> -->
          <a-col :span="24">
            <a-form-item :wrapper-col="{ span: 24, offset: 0 }">
              <div class="next">
                <a-button type="primary" @click="onSubmit" class="submit">保存</a-button>
              </div>
            </a-form-item>
          </a-col>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import Upload from '/@/components/support/file-upload/index.vue';
  import Back from '/@/components/go-back/index.vue';
  import { useRoute, useRouter } from 'vue-router';
  import { region } from '/@/config/address.js';
  import { rzApplyApi } from '/@/api/system/rzApply';
  import { useRzApplyStore } from '/@/store/modules/system/rzApply';
  import dayjs from 'dayjs';
  let rzApplyStore = useRzApplyStore();
  const router = useRouter();
  const route = useRoute();
  const regionData = ref(region);
  const province = ref(regionData);
  const city = ref([]);
  const area = ref([]);
  const labelCol = ref({ style: { width: '120px' } });
  const wrapperCol = ref({ span: 14 });
  const role = ref('');
  const formData = ref({
    custName: '',
    custNationCode: '',
    custNationValue: '',
    custMarriage: '',
    hasChildren: '',
    certNo: '',
    certStartDate: '',
    certEndDate: '',
    certLongTerm: '',
    custEducation: '',

    homeRegion: [],
    homeRegionOption: { code: '', value: '' },
    addressRegion: [],
    addressRegionOption: { code: '', value: '' },

    placeProvinceName: '',
    placeProvinceValue: '',
    placeCityName: '',
    placeCityValue: '',
    placeAreaName: '',
    placeAreaValue: '',
    custHomeplaceValue: '',
    custHomeplace: '',
    custAddress: '',
    custMobile: '',
    sortIndex: 0,
    // homeCity: '',
    // homeArea: '',
    // homeProvince: '',
    homeProvinceName: '',
    homeProvinceValue: '',
    homeCityName: '',
    homeCityValue: '',
    homeAreaName: '',
    homeAreaValue: '',
    custAddressValue: '',

    webDealerPIncome: 0,
    webDealerFIncome: 0,
    spouse: {
      custSex: '',
      custName: '',
      custNationCode: '',
      custNationValue: '',
      certNo: '',
      certDate: [],
      certStartDate: '',
      certEndDate: '',
      certLongTerm: '',
      custMobile: '',
    },
  });
  const id = ref('');
  async function onSubmit() {
    console.log(rzApplyStore.getViewLesseeInfo);
    // if (rzApplyStore.getRole == 'guarantor') {
    //   const prev = rzApplyStore.getGuarantor;
    //   const param = {
    //     bussNo: rzApplyStore.getBussNo,
    //     custName: prev.custName,
    //     custNationCode: prev.custNationCode,
    //     custNationValue: prev.custNationValue,
    //     custMarriage: formData.value.custMarriage,
    //     hasChildren: formData.value.hasChildren,
    //     certNo: prev.certNo,
    //     certStartDate: prev.certStartDate,
    //     certEndDate: prev.certEndDate,
    //     certLongTerm: prev.certLongTerm,
    //     custEducation: formData.value.custEducation,
    //     custHomeplaceCode: prev.custHomeplaceCode,
    //     custHomeplaceValue: prev.custHomeplaceValue,
    //     custHomeplace: prev.custHomeplace,
    //     custMobile: prev.custMobile,
    //     custAddressCode: formData.value.homeAreaValue,
    //     custAddressValue: formData.value.homeProvinceName + formData.value.homeCityName + formData.value.homeAreaName,
    //     custAddress: formData.value.custAddress,
    //     webDealerPIncome: formData.value.webDealerPIncome,
    //     webDealerFIncome: formData.value.webDealerFIncome,
    //     sortIndex: await getSortIndex('guarantor'), //todo
    //     spouse: {
    //       custName: formData.value.spouse.custName,
    //       custNationCode: formData.value.spouse.custNationCode,
    //       custNationValue: formData.value.spouse.custNationValue,
    //       certNo: formData.value.spouse.certNo,
    //       certStartDate: formData.value.spouse.certDate[0] ? dayjs(formData.value.spouse.certDate[0]).format('YYYY-MM-DD') : '',
    //       certEndDate: formData.value.spouse.certDate[1] ? dayjs(formData.value.spouse.certDate[1]).format('YYYY-MM-DD') : '',
    //       certLongTerm: formData.value.spouse.certLongTerm ? 'Y' : 'N',
    //       custMobile: formData.value.spouse.custMobile,
    //     },
    //   };
    //   const apply = {
    //     natureAddForm: rzApplyStore.getGuarantor.role == 1 ? param : {},
    //     legalAddForm: rzApplyStore.getGuarantor.role == 2 ? param : {},
    //     verifyCode: '',
    //   };
    //   const res = await rzApplyApi
    //     .guarantorVerify(apply)
    //     .then((res) => {
    //       if (res.code == 0) {
    //         if (res.data.verifyCode == 'Y') {
    //           rzApplyApi.guarantorAddOrUpdate(apply).then((res) => {
    //             if (res.code == 0) {
    //               rzApplyStore.setGuarantor(null);
    //               router.go(-2);
    //               router.replace({
    //                 path: '/rzApply/surety-list',
    //                 query: {
    //                   bussNo: formData.value.bussNo,
    //                   mode: rzApplyStore.getMode,
    //                 },
    //               });
    //             }
    //           });
    //         } else {
    //           rzApplyApi.guarantorTempSave(apply).then((res) => {
    //             if (res.code == 0) {
    //               rzApplyStore.setGuarantor(null);
    //               router.go(-2);
    //               router.replace({
    //                 path: '/rzApply/surety-list',
    //                 query: {
    //                   bussNo: formData.value.bussNo,
    //                   mode: rzApplyStore.getMode,
    //                 },
    //               });
    //             }
    //           });
    //         }
    //       } else {
    //         message.warning({ message: res.msg });
    //       }
    //     })
    //     .catch((err) => {
    //       console.log(err, 'aaaa');
    //     });
    // } else {

    const param = {
      id: id.value,
      bussNo: formData.value.bussNo,
      custName: formData.value.custName,
      custNationCode: formData.value.custNationCode,
      custNationValue: formData.value.custNationValue,
      custMarriage: formData.value.custMarriage,
      hasChildren: formData.value.hasChildren,
      certNo: formData.value.certNo,
      certStartDate: formData.value.certDate[0] ? dayjs(formData.value.certDate[0]).format('YYYY-MM-DD') : '',
      certEndDate: formData.value.certDate ? dayjs(formData.value.certDate[1]).format('YYYY-MM-DD') : '',
      certLongTerm: formData.value.certLongTerm,
      custEducation: formData.value.custEducation,

      custHomeplaceCode: formData.value.homeRegionOption.code,
      custHomeplaceValue: formData.value.homeRegionOption.value,
      custHomeplace: formData.value.custHomeplace,

      custMobile: formData.value.custMobile,
      custAddressCode: formData.value.addressRegionOption.code,
      custAddressValue: formData.value.addressRegionOption.value,
      custAddress: formData.value.custAddress,
      webDealerPIncome: formData.value.webDealerPIncome,
      webDealerFIncome: formData.value.webDealerFIncome,
      sortIndex: formData.value.sortIndex, //todo
      spouse: {
        custName: formData.value.spouse.custName,
        custNationCode: formData.value.spouse.custNationCode,
        custNationValue: formData.value.spouse.custNationValue,
        certNo: formData.value.spouse.certNo,
        certStartDate: formData.value.spouse.certDate[0] ? dayjs(formData.value.spouse.certDate[0]).format('YYYY-MM-DD') : '',
        certEndDate: formData.value.spouse.certDate[1] ? dayjs(formData.value.spouse.certDate[1]).format('YYYY-MM-DD') : '',
        certLongTerm: formData.value.spouse.certLongTerm ? 'Y' : 'N',
        custMobile: formData.value.spouse.custMobile,
      },
    };
    const apply = {
      natureAddForm: rzApplyStore.getViewLesseeInfo.role == 1 ? param : {},
      legalAddForm: rzApplyStore.getViewLesseeInfo.role == 2 ? param : {},
      verifyCode: '',
    };
    const res = await rzApplyApi
      .lesseeVerify(apply)
      .then((res) => {
        if (res.code == 0) {
          if (res.data.verifyCode == 'Y') {
            rzApplyApi.lesseeAddOrUpdate(apply).then((res) => {
              if (res.code == 0) {
                rzApplyStore.setLessee(null);
                rzApplyStore.setViewLesseeInfo(null);
                router.replace({
                  path: '/rzApply/lessee-list',
                  query: {
                    bussNo: rzApplyStore.getViewLesseeInfo.bussNo,
                    mode: rzApplyStore.getMode,
                  },
                });
              }
            });
          } else {
            rzApplyApi.lesseeTempSave(apply).then((res) => {
              if (res.code == 0) {
                rzApplyStore.setLessee(null);
                rzApplyStore.setViewLesseeInfo(null);

                router.replace({
                  path: '/rzApply/lessee-list',
                  query: {
                    bussNo: rzApplyStore.getViewLesseeInfo.bussNo,
                    mode: rzApplyStore.getMode,
                  },
                });
              }
            });
          }
        } else {
          message.warning({ message: res.msg });
        }
      })
      .catch((err) => {
        console.log(err, 'aaaa');
      });
    // }
  }
  async function getSortIndex(role) {
    if (role == 'lessee') {
      const res = await rzApplyApi.lesseePartInfoList({ bussNo: rzApplyStore.getBussNo });
      if (res.code == 0) {
        return Promise.resolve(res.data.length);
      }
      return Promise.reject(0);
    } else {
      const res = await rzApplyApi.guarantorList({ bussNo: rzApplyStore.getBussNo });
      if (res.code == 0) {
        return Promise.resolve(res.data.length);
      }
      return Promise.reject(0);
    }
  }
  function nationChange(e) {
    formData.value.spouse.custNationValue = e.label[0].children;
    formData.value.spouse.custNationCode = e.value;
  }
  function onUpload(fileList, type) {
    if (type == 'fontUrl') {
      formData.value.fontUrl = fileList;
    } else {
      formData.value.backUrl = fileList;
    }
    form.feedbackAttachment = fileList;
  }
  function regionChange(e, selectedOptions, field) {
    if (field == 'owner') {
      console.log(e, selectedOptions, 'owner');
      formData.value.homeRegionOption = {
        code: selectedOptions[selectedOptions.length - 1].areaId,
        value: selectedOptions.map((item) => item.areaName).join(' '),
      };
      console.log(formData.value);
      return;
    } else {
      formData.value.addressRegionOption = {
        code: selectedOptions[selectedOptions.length - 1].areaId,
        value: selectedOptions.map((item) => item.areaName).join(' '),
      };
      console.log(formData.value);
      return;
    }
  }

  onMounted(() => {
    const query = route.query;
    id.value = query.id;
    if (query.id) {
      const info = rzApplyStore.getViewLesseeInfo;
      formData.value = {
        bussNo: query.bussNo,
        custName: info.custName,
        custNationCode: info.custNationCode,
        custNationValue: info.custNationValue,
        custMarriage: info.custMarriage,
        hasChildren: info.hasChildren,
        certNo: info.certNo,
        certDate: info.certStartDate ? [dayjs(info.certStartDate), dayjs(info.certEndDate)] : [],
        certStartDate: info.certStartDate,
        certEndDate: info.certEndDate,
        certLongTerm: info.certLongTerm,
        custEducation: info.custEducation,

        custMobile: info.custMobile,
        custAddress: info.custAddress,
        sortIndex: info.sortIndex,

        homeRegion: info.custHomeplaceCode && [
          info.custHomeplaceCode.substr(0, 2),
          info.custHomeplaceCode.substr(0, 4),
          info.custHomeplaceCode.substr(0, 6),
        ],
        homeRegionOption: {
          code: info.custHomeplaceCode && info.custHomeplaceCode.substr(0, 6),
          value: info.custHomeplaceValue && info.custHomeplaceValue,
        },
        custHomeplace: info.custHomeplace,
        addressRegion: info.custAddressCode && [
          info.custAddressCode.substr(0, 2),
          info.custAddressCode.substr(0, 4),
          info.custAddressCode.substr(0, 6),
        ],
        addressRegionOption: {
          code: info.custAddressCode && info.custAddressCode.substr(0, 6),
          value: info.custAddressValue && info.custAddressValue,
        },

        custAddress: info.custAddress,

        webDealerPIncome: info.webDealerPIncome,
        webDealerFIncome: info.webDealerFIncome,
        spouse: {
          custName: info.spouse ? info.spouse.custName : '',
          custNationCode: info.spouse ? info.spouse.custNationCode : '',
          custNationValue: info.spouse ? info.spouse.custNationValue : '',
          certNo: info.spouse ? info.spouse.certNo : '',
          certDate: info.spouse ? [dayjs(info.spouse.certStartDate), dayjs(info.spouse.certEndDate)] : [],
          certStartDate: info.spouse ? info.spouse.certStartDate : '',
          certEndDate: info.spouse ? info.spouse.certEndDate : '',
          certLongTerm: info.spouse ? info.spouse.certLongTerm : '',
          custMobile: info.spouse ? info.spouse.custMobile : '',
        },
      };
    }
  });
</script>
<style scoped lang="less">
  @import './index.less';
  .app-page {
    display: flex;
    flex-direction: column;
    /deep/ .ant-form {
      width: 100%;
      .info-item {
        width: 100%;
      }
    }
    .top {
      margin-bottom: 42rem;
      display: flex;
      align-items: center;
      position: relative;
      h2 {
        width: 100%;
        font-family: Microsoft YaHei;
        font-size: 30px;
        color: #000000;
        margin-bottom: 0;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .content {
      flex: 1;
      overflow: auto;
    }
  }
</style>
